{% extends 'messages/base.html' %}

{% block title %}
    Messages
{% endblock %}

{% block styles %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="{{ url_for('static', filename='src/css/style.css') }}"> -->
{% endblock %}

{% block body %}

    <nav class="navbar sticky-top navbar-light bg-light">
        <div class="top flexed">
            <h2 style="color: #123c69; font-size: 20px !important"><a href="/messages">Ответы на сообщения</a></h2>

            <!-- Button trigger modal
            <button type="button" class="btn btn-primary edit-button" data-toggle="modal" data-target="#exampleModalCenter">
                Logout
            </button> -->
        </div>
    </nav>

    <div class="container">
        <main class="content">
			{% if allMessages.items|length == 0 %}
            <div class="alert alert-secondary" role="alert">
                Нет новых сообщений
            </div>
            {% else %}
            {% for message in allMessages.items %}
            <div class="task-items">
                <div class="item">
                    <div class="task">
                        <h5>Текст: {{ message.text }}</h5>
                    </div>
                    <div class="task-buttons">
                        <a class="btn btn-outline-primary update-button" href="/update/{{message.id}}" role="button">Ответить</a>
                    </div>
                </div>
            </div>
            {% endfor %}
            {% endif %}
            
        </main>
    </div>
	{% include "messages/pagination.html" %}

{% endblock %}
